
<link rel="stylesheet" href="/api-ui/static/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="/api-ui/static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/api-ui/static/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/box.css" />
<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/checkbox.css" />
<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/checkbox.css" />
<style type="text/css">
a {
	color: black;
}

a:hover {
	text-decoration: none;
}

.bgc-w {
	background-color: #fff;
}

</style>
<!--vue脚本库-->
<script type="text/javascript"
		src="/api-ui/static/js/vue/vue-3.2.4.global.js">
</script>
<!--axios脚本库-->
<script type="text/javascript"
		src="/api-ui/static/js/vue/axios-0.18.0.min.js">
</script>
<!--我们自己封装的axios函数库 -->
<script type="text/javascript"
		src="/api-ui/static/js/vue/axios-helper.js">
</script>
<body id="app">
<div class="row" style="padding-top: 10px;">
	<div class="col-md-2">
		<h1 style="font-size: 24px; margin: 0;" class="">角色管理</h1>
	</div>
	<div class="col-md-10 text-right">
		<a href="##"><span class="glyphicon glyphicon-home"></span> 首页</a> > <a
			disabled="disabled">角色管理</a>
	</div>
</div>
<div class="row" style="padding-top: 15px;" >
	<div class="col-md-12">
		<!--id="container"-->
		<div class="bgc-w box">
			<!--盒子头-->
			<div class="box-header">
				<h3 class="box-title">
					<a href="javascript:history.back();" class="label label-default"
						style="padding: 5px;"> <i
						class="glyphicon glyphicon-chevron-left"></i> <span>返回</span>
					</a>
				</h3>
			</div>
			<!--盒子身体-->
			<form action=""  method="post">
			<div class="box-body no-padding">
				<div class="box-body">
				<!--錯誤信息提示  -->
					<div class="alert alert-danger alert-dismissable" role="alert"style="display: none;">
						错误信息:<button class="thisclose close" type="button">&times;</button>
						<span class="error-mess"></span>
					</div>
					<div class="row">
						
						<div class="col-md-6 form-group">
								<label>
									<span id="ctl00_cphMain_Label1">名称</span>
								</label>
								<input name="roleName" type="text" v-model="role.roleName" class="form-control"/>
								<input name="roleId" type="text" value="" hidden="hidden"/>
							</div>
							<div class="col-md-6 form-group">
								<label>
									<span id="ctl00_cphMain_Label2">类型值</span>
								</label>
								<select class="form-control" name="sex" v-model="selectValue" >
									<option value="0">--请选择--</option>
									<option value="5">5</option>
									<option value="4">4</option>
									<option value="3">3</option>
									<option value="2">2</option>
									<option value="1">1</option>
								</select>
							</div>
						
					</div>
				</div>
			</div>
			<!--盒子尾-->
			<div class="box-footer">
				<button class="btn btn-primary" id="save" type="button" @click="save"/>保存
				<button class="btn btn-default" id="cancel" type="button"
						onclick="window.history.back();" />取消
			</div>
			</form>
		</div>
	</div>
</div>
</body>

<script type="module">
	Vue.createApp({
		data() {
			return {
				role:{
					roleId:null,
					roleName:null,
					roleValue:null
				},
				selectValue:"0"
			}
		},
		created() {

		},
		methods: {
			save(){
				console.log("开始进入了");
				//提示框可能在提交之前是block状态，所以在这之前要设置成none
				$('.alert-danger').css('display', 'none');
				let valid = true;
				$('.form-control').each(function(index) {
					// 如果在这些input框中，判断是否能够为空
					if ($(this).val() == "") {
						// 排除哪些字段是可以为空的，在这里排除
						if (index ==1) {
							return true;
						}

						// 获取到input框的兄弟的文本信息，并对应提醒；
						var brother = $(this).siblings('.control-label').text();
						var errorMess = "[" + brother + "输入框信息不能为空]";
						// 对齐设置错误信息提醒；红色边框
						$(this).parent().addClass("has-error has-feedback");
						$('.alert-danger').css('display', 'block');
						// 提示框的错误信息显示
						$('.error-mess').text(errorMess);
						// 模态框的错误信息显示
						$('.modal-error-mess').text(errorMess);
						valid = false;
						return false;
					} else {
						// 在这个里面进行其他的判断；不为空的错误信息提醒
						return true;
					}
				});
				if (!valid ) {
					return false;
				}
				this.role.roleValue=this.selectValue;
				console.info(this.role);
				requestPost("/api-core/aoaRole/save",this.role).then((data)=>{
					if(data){
						alert("添加成功");
						window.location.href="/api-ui/page/rolemanage.html";
					}else{
						alert("添加失败");
					}
				})
			}
		}
	}).mount("#app");
</script>

<style type="text/css">
#thismodal .modal-dialog {
	width: 500px;
	top:20%;
}

#thismodal .modal-body .icon {
	height: 80px;
	width: 80px;
	margin: 20px auto;
	border-radius: 50%;
	color: #aad6aa;
	border: 3px solid #d9ead9;
	text-align: center;
	font-size: 44px;
}

#thismodal .modal-body .icon .glyphicon {
	font-size: 46px;
	top: 14px;
}

#thismodal .modal-p {
	margin: 20px auto;
}

#thismodal .modal-body .modal-p h2 {
	text-align: center;
}

#thismodal .modal-body .modal-p p {
	text-align: center;
	color: #666;
	font-size: 16px;
	padding-top: 8px;
	font-weight: 300;
}

#thismodal .modal-p .btn {
	margin-left: 40%;
	width: 100px;
	height: 40px;
}

#thismodal .modal-error .icon {
	color: #f27474;
	border: 3px solid #f27474;
}
</style>

<div class="modal fade in" id="thismodal" data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body modal-success" style="display: none;">
				<div class="icon">
					<span class="glyphicon glyphicon-ok"></span>
				</div>
				<div class="modal-p">
					<h2>操作成功</h2>
					<!--<p style="">已回复</p>-->
					<div class="modal-p">
						<button type="button" class="btn btn-primary successToUrl" data-dismiss="modal">确定</button>
					</div>
				</div>
			</div>
			<div class="modal-body modal-error" style="display: none;">
				<div class="icon">
					<span class="glyphicon glyphicon-remove"></span>
				</div>
				<div class="modal-p">
					<h2 style="text-align: center;">错误信息</h2>
					<p class="modal-error-mess">此处将显示弹出框的错误提示信息</p>
					<div class="modal-p">
						<button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
					</div>
				</div>
			</div>

		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>

<!-- /.modal -->
<script type="text/javascript" src="/api-ui/static/js/modalTip.js" ></script>

